利用 Hexo + Github Pages 搭建博客并优化 Next 主题教程

本文总结一下 Hexo 搭建博客的主要流程，能够在日后快速恢复博客环境。

Hexo 的官方文档写的已经很全面了，本文仅将一些注意点列出。

安装 Hexo 的文档参考：

安装 Hexo 之前，你的电脑上需要有

如果是 Mac 用户， 您在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具

全局安装 hexo-cli：1npm install -g hexo-cli

如果遇到权限的问题，可以使用如下命令：1sudo chown -R $(whoami) /usr/local/lib/node_modules/

设置 /usr/local/lib/node_modules/ 文件夹属于当前用户。

此外，如果你要使用 root 权限安装的话，可以使用 sudo -s 切为 root 用户进行相关操作。这么做的话，会将一些文件夹的默认属组设置为 root 了，不推荐。

npm 权限问题：

执行完毕之后，博客其实已经 OK 了：

执行上面命令即可本地预览博客内容了。

官宣-站点配置文件 内容中介绍了很多字段的用途

Hexo 提供快速一键部署，将博客部署到 GIthub Pages。

安装 hexo-deployer-git：12$ cd MyBlog$ npm install hexo-deployer-git --save

修改站点配置文件中的配置：12345# npm install hexo-deployer-git --savedeploy:- type: git repo: [email protected]:MichaelXoXo/michaelxoxo.github.io.git branch: master

执行部署：1hexo d

hexo 常用指令

npm 常用指令示例：12345678npm install 模块名 -g --save # g全局安装 save安装包信息将加入到dependencies（生产阶段的依赖）npm install [email protected] # 指定版本npm install # 该命令可以根据dependencies配置安装所有的依赖包npm update [-g] 模块名npm outdated 模块名 # 检查模块是否过时npm ls -g # 查看全局安装的模块npm uninstall 模块名npm info hexo-cli # 查看hexo-cli模块的信息

语法：1234567{% note [class] [no-icon] %}这里写你需要写的内容{% endnote %}// 注意上面的class和no-icon属性是可以选择的[class] : default | primary | success | info | warning | danger.[no-icon] : Disable icon in note.

示例：123{% note success no-icon %}success形式的类别{% endnote %}

效果：

success形式的类别

这里使用 no-icon 表示不显示图标，可选，默认会带有图标。

源码：123- 铅笔- 上传- 下载

效果：

源码：123456{% cq %}人生乃是一面镜子，从镜子里认识自己，我要称之为头等大事，也只是我们追求的目的！{% endcq %}

效果：

人生乃是一面镜子，从镜子里认识自己，我要称之为头等大事，也只是我们追求的目的！

首先在主题 _config.xml 配置：12# Label tag.label: true

源码：1{% label primary@primary内容 %}

效果：primary内容

主题配置文件：

语法：12345{% tabs [Unique name], [index] %}Any content (support inline tags too).{% endtabs %}

源码示例：1234567891011{% tabs 选项卡, 2 %}这是选项卡 1 内容这是选项卡 2 内容这是选项卡 3** 哇，你找到我了！φ(≧ω≦*)♪～{% endtabs %}

效果：

这是选项卡 1 内容

这是选项卡 2 内容

这是选项卡 3* 哇，你找到我了！φ(≧ω≦)♪～

源码：1{% btn https://www.baidu.com, 点击下载百度, download fa-lg fa-fw %}

效果：点击下载百度

由于一直使用的是「微博图床」，渣浪微博和简书开启了图片防盗链，请大家在博客中加入以下标签来绕过：

Next 主题只需要在 themes/next/layout/_partials/head/head.swig 中添加上面一行内容即可。

Next 扩展都安装在themes/next/source/lib文件夹下

编辑站点配置文件 _config.yml：1theme: next # 启用next主题

站点配置文件：1language: zh-CN # 最新版中，不再使用zh-Hans

编辑主题配置文件：

菜单内容的设置格式是：item name: link || icon。其中 `item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。

设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言）。

icon 使用的是 fontawesome 图标，严格区分大小写。

将准备好的头像放置在主题目录下的 source/images/ 中。

使用 LeanCloud

参考这个 为NexT主题添加文章阅读量统计功能

主题配置文件中，rss 字段设为空，启用，设为 false 则不启用。启用的话，需要安装插键：1npm install hexo-generator-feed --save

如果有集成评论服务，页面也会带有评论。 若需要关闭的话，请添加字段 comments 并将值设置为 false，如：12345title: 标签date: 2014-12-22 12:39:04type: "tags"comments: false---

标签示例：1234title: 标签测试文章tags: - Testing - Another Tag

请参阅 Hexo 的分类与标签文档，了解如何为文章添加标签或者分类

补充：12345categories:- Diarytags:- PS3- Games

分类方法的分歧如果您有过使用WordPress的经验，就很容易误解Hexo的分类方式。WordPress支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是Hexo不支持指定多个同级分类。下面的指定方法：123categories:- Diary- Life

会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

并列分类，了解一下：123categories:- [Linux]- [Tools]

并列+子分类，再了解一下：123categories:- [Linux, Hexo]- [Tools, PHP]

同样的方法，添加分类页面：1$ hexo new page categories

设置字体可参考:官宣-字体

代码高亮预览

主题配置文件：1234567social: GitHub: https://github.com/michaelxoxo || github 微博: https://weibo.com/1838446070/profile?topnav=1&wvr=6 || weibo 博客园: https://www.cnblogs.com/michael-xiang/ || globe 知乎: https://www.zhihu.com/people/michaelXoX || globe Twitter: https://twitter.com/728_michael || twitter Telegram: https:///michaelxiang || telegram

图标名称 是 Font Awesome 图标的名字（不必带 fa- 前缀）。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标

只需要 主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能：12345678910reward_settings: # If true, reward would be displayed in every article by default. # You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter. enable: true animation: false comment: 我知道是不会有人点的，但万一有人想不开呢👇reward: wechatpay: /images/wechatpay.jpg alipay: /images/alipay.png

这个时间将在站点的底部显示，例如 ©2013 - 2015。 编辑 主题配置文件，新增字段 since：

主题配置文件设置。比较在乎速度，可以关闭动画。

编辑 主题配置文件， 搜索 canvas_nest 或 three_waves，根据您的需求设置值为 true 或者 false 即可

我只启用了 canvas_nest

站点配置文件，新增如下内容：12345search: path: search.xml field: post format: html limit: 10000

编辑主题配置文件，启用本地搜索：123# Local searchlocal_search: enable: true

编辑 主题配置文件 中的 busuanzi_count 的配置项：123456789busuanzi_count: enable: true total_visitors: true total_visitors_icon: user total_views: true total_views_icon: eye # 文章阅读次数，关闭，避免与leanclound_visitors冲突 post_views: false post_views_icon: eye

fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages

参考：

theme-next-needmoreshare2：12cd themes/nextgit clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton

主题配置文件配置：12345678910111213141516needmoreshare2: enable: true postbottom: enable: true options: iconStyle: box boxForm: horizontal position: bottomCenter networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook float: enable: false options: iconStyle: box boxForm: horizontal position: middleRight networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

Next 评论配置很简单，支持很丰富。

front matter 中设置 comments: false，当前页就不会显示评论框了。

编辑 主题配置文件， 将 disqus 下的 enable 设定为 true，同时提供您的 shortname。count 用于指定是否显示评论数量

Valine这个评论系统也是用到了 leancloud

头像设置，可以用你对应的邮箱设置 Gravatar，这样你评论时，就是注册时使用的邮箱了。

邮件提醒，进入Leancloud>选择你的评论所存放的应用>设置>邮件模板，按下图设置好用于重置密码的邮件主题>然后保存:12345

Hi, {{username}}

你在 {{appname}} 的评论收到了新的回复，请点击查看：

马上查看

参考：

参考这两个教程：

hexo-douban 可以实现生成豆瓣读书、电影、游戏的页面。具体的使用方法可以看项目的主页或者这篇文章

博客建完的地址：https://michaelxoxo.github.io/